/**
*
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: labelPath }">{{labelTitle}}</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    <NoPermission-->
    <!--      v-if="!authFilter(permissionObj, 'index')">-->
    <!--    </NoPermission>-->

<!--    <div class="mgt30 pd20 box-b bde6 flex-align">-->
<!--      <el-page-header-->
<!--        @back="goBack" content="详情页面">-->
<!--      </el-page-header>-->
<!--    </div>-->

    <div class="mgt24">

      <!-- 回复 -->
      <el-form ref="editForm" :model="editForm" :rules="rules">

        <div class="pdl20 pdr20 pdt10 pdb10 box-b bde6 radius5 flex-align fs12 flex-wrap"
             v-if="editForm">
          <div class="flex-align lh20 mgr16">
            <el-page-header @back="goBack" content="">
            </el-page-header>
            <div class="color7f fs12">
              问题模块：
            </div>
            <div class="">
              {{editForm.module || '-'}}
            </div>
          </div>
          <div class="flex-align lh20 mgr16">
            <div class="color7f fs12">
              问题概率：
            </div>
            <div class="">
              {{editForm.probability || '-'}}
            </div>
          </div>
          <div class="flex-align lh20 mgr16">
            <div class="color7f fs12">
              发生时间：
            </div>
            <div class="">
              {{editForm.questionTime|timestampToDay}}
            </div>
          </div>
<!--          <div class="flex-align lh20 mgr16">-->
<!--            <div class="color7f fs12">-->
<!--              IMEI：-->
<!--            </div>-->
<!--            <div class="">-->
<!--              {{editForm.imei || '-'}}-->
<!--            </div>-->
<!--          </div>-->
          <div class="flex-align lh20 mgr16">
            <div class="color7f fs12">
              指纹：
            </div>
            <div class="">
              {{editForm.customFields.fingerprint || '-'}}
            </div>
          </div>
          <div class="flex-align lh20 mgr16">
            <div class="color7f fs12">
              WIFI MAC地址：
            </div>
            <div class="">
              {{editForm.customFields.wifiMacAddress || '-'}}
            </div>
          </div>
          <div class="flex-align lh20">
            <div class="color7f fs12">
              BT MAC地址：
            </div>
            <div class="">
              {{editForm.customFields.btMacAddress || '-'}}
            </div>
          </div>
        </div>

        <div class="h370 pdl30 pdr30 pdb20 box-b bde6 radius5 mgt10 ovfya"
             ref="mianscroll">
<!--        <div class="pdl30 pdr30 pdb20 box-b bde6 radius5 mgt10 ovfya"-->
<!--             :style="'height:'+replyBoxHeight+'px'"-->
<!--             ref="mianscroll">-->
          <div v-if="editForm.replyList&&editForm.replyList.length>0">
            <div
              class="box-b bdb"
              :class="{'to-btm':editForm.replyList.length-1 == index}"
              v-for="(item,index) in editForm.replyList" :key="item.id">
              <div class="between-box h45"
                   v-if="index == 0">
                <div class="fs16">
                  问题
                </div>
                <div class="flex-align">
                  <div class="color7f fs12">
                    选择型号：
                  </div>
                  <div class="fs14">
                    {{editForm.model || '-'}}
                  </div>
                </div>
              </div>
              <template v-if="index != 0">
                <div class="h45 fs14 colorgreen"
                     v-if="item.isReply == 1">
                  客服回复
                </div>
                <div class="h45 fs14 colorgreen"
                     v-if="item.isReply == 0">
                  用户回复
                </div>
              </template>
              <div class="lh20 fs12 minh40 ovfya">
                <c-rich-text :content="item.content"></c-rich-text>
              </div>
              <div class="flex-wrap">
                <template v-if="item.imagesList&&item.imagesList.length>0">
                  <div
                    v-for="(pItem,pIndex) in item.imagesList" :key="pIndex">
                    <c-image
                      :previewShow="true"
                      :srcList="item.imagesList"
                      :src="pItem"
                      className="img100 mgr10 mgb10">
                    </c-image>
                  </div>
                </template>
                <template v-if="item.videosList&&item.videosList.length>0">
                  <div
                    v-for="(vItem,vIndex) in item.videosList" :key="vItem+vIndex">
                    <Video
                      :key="vItem+vIndex"
                      :width="200"
                      :height="100"
                      :src="vItem.f_url"
                      :poster="poster" />
                  </div>
                </template>
              </div>
              <div class="jsend pd1000 color65">
                {{item.updateTime|timestampToTime}}
              </div>
            </div>
          </div>
        </div>

        <div class="pdl30 pdr30 pdt12 box-b bde6 radius5 mgt10"
          v-if="activeTabs&&activeTabs.length>0">
          <el-tabs v-model="activeTabsValue" type="card" @tab-click="handleClick">
            <el-tab-pane
              v-for="(item) in activeTabs"
              :key="item.name"
              :label="item.label"
              :name="item.name">
            </el-tab-pane>
          </el-tabs>
          <!--    ref放在v-for里面，$refs会返回数组，所以ref不能放在v-for里面包裹      -->
          <div class="relative">
            <div v-if="activeTabsValue=='reply'">
              <el-row>
                <el-col :span="12">
                  <el-form-item class="mgb0" label=""  prop="content">
<!--                <el-input-->
<!--                  clearable-->
<!--                  type="textarea"-->
<!--                  :autosize="{ minRows: 3, maxRows: 4}"-->
<!--                  placeholder="请输入回复内容"-->
<!--                  v-model="editForm.content">-->
<!--                  <i-->
<!--                    v-show="editForm.content"-->
<!--                    class="clearButton el-input__icon el-icon-circle-close el-input__clear"-->
<!--                    @click.prevent="editForm.content=''"-->
<!--                  />-->
<!--                </el-input>-->
                    <ClearableTextInput
                      :rows="4"
                      :autosize="{ minRows: 3, maxRows: 4}"
                      placeholder="请输入回复内容"
                      v-model="editForm.content"
                      :values="editForm.content"
                      :clearable="true"
                      :input-change="inputChangeMethod"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                </el-col>
              </el-row>
            </div>
            <div v-if="activeTabsValue=='quickReply'">
              <el-row>
                <el-col :span="12">
                  <el-form-item class="mgb0" label=""  prop="content">
                    <AutoCompleteCustom
                      v-if="activeTabsValue=='quickReply'"
                      :clearable="true"
                      type="textarea"
                      :rows="4"
                      :autosize="{ minRows: 3, maxRows: 4}"
                      class="w100"
                      placeholder="请输入快捷回复内容"
                      :restaurants="contentList"
                      :state="editForm.content"
                      @handleSelect="handleSelect">
                    </AutoCompleteCustom>
                    <!--  回复插件 -->
<!--                    <v-selectpage-->
<!--                      class="my-selectpage-class"-->
<!--                      ref="selectpageRefs"-->
<!--                      title="快捷回复"-->
<!--                      placeholder="请选择快捷回复内容"-->
<!--                      :data="dataService"-->
<!--                      key-field="label"-->
<!--                      search-field="label"-->
<!--                      show-field="label"-->
<!--                      v-model.trim="editForm.content"-->
<!--                      :pageSize="formReplay.pagenum"-->
<!--                      :pageNumber="formReplay.page"-->
<!--                      :params="formReplay"-->
<!--                      :result-format="resultFormat"-->
<!--                      @values="handelSingleValues">-->
<!--                    </v-selectpage>-->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                </el-col>
              </el-row>
            </div>
            <div  class="mgt12">
              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="上传图片"
                    prop="imagesList">
                    <c-upload-sec
                      ref="uploadSec"
                      :deleteServe="true"
                      class="flex1"
                      accept=".png, .jpg, .jpeg"
                      imgClass="img44"
                      v-model="editForm.imagesList"
                      :max="9"
                      :filename="filename"
                      itemStyles="width: 50px;height: 50px;margin: 0 8px 8px 0;"
                      @complete="getPhoto">
                    </c-upload-sec>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="上传视频"
                    prop="imagesList">
                    <c-upload-slice
                      ref="uploadSlice"
                      class="flex1"
                      imgClass="img44"
                      accept=".mp4,.m2v,.mkv"
                      v-model="editForm.videosList"
                      :limit="9"
                      :maxSizeAll="50"
                      :filename="filename"
                      @complete="getVideos">
                    </c-upload-slice>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>

<!--          <div class="fs16">-->
<!--            回复-->
<!--          </div>-->
<!--          <el-form-item class="mgb0 mgt10" label=""  prop="content">-->
<!--            <el-input-->
<!--              clearable-->
<!--              type="textarea"-->
<!--              :autosize="{ minRows: 3, maxRows: 4}"-->
<!--              placeholder="请输入回复内容"-->
<!--              v-model="editForm.content">-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--          <div  class="between-start mgt24">-->
<!--            <c-upload-sec-->
<!--              ref="uploadSec"-->
<!--              :deleteServe="true"-->
<!--              class="flex1"-->
<!--              accept=".png, .jpg, .jpeg"-->
<!--              tips="上传图片"-->
<!--              imgClass="img44"-->
<!--              v-model="editForm.imagesList"-->
<!--              :max="9"-->
<!--              :filename="filename"-->
<!--              itemStyles="width: 50px;height: 50px;margin: 0 8px 8px 0;"-->
<!--              @complete="getPhoto"-->
<!--            >-->
<!--            </c-upload-sec>-->
<!--            <c-upload-slice-->
<!--              ref="uploadSlice"-->
<!--              class="flex1"-->
<!--              imgClass="img44"-->
<!--              accept=".mp4,.m2v,.mkv"-->
<!--              v-model="editForm.videosList"-->
<!--              :max="9"-->
<!--              :filename="filename"-->
<!--              @complete="getVideos">-->
<!--            </c-upload-slice>-->
<!--          </div>-->
        </div>

        <div class="dialog-footer mgt10 ovfh"
          v-if="activeTabs&&activeTabs.length>0">
          <el-button size="small" type="primary" class="title" @click="submitForm('editForm')">提交</el-button>
        </div>

<!--        <div class="dialog-footer mgt10 ovfh">-->
<!--          <el-button-->
<!--            v-if="authFilter(permissionObj, 'update')"-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            class="title"-->
<!--            @click="handleEdit(editForm,'回复')">-->
<!--            回复-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            v-if="authFilter(permissionObj, 'quickReply')"-->
<!--            size="mini"-->
<!--            type="primary"-->
<!--            @click="handleEdit(editForm,'快捷回复')">-->
<!--            快捷回复-->
<!--          </el-button>-->
<!--        </div>-->

      </el-form>
    </div>

    <!-- 回复弹框界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="80%"
      @close="closeDialog('editForm')"
      style="margin-left: 200px;">
      <el-form
        label-width="80px"
        :model="editForm"
        :rules="rules"
        ref="editForm">
        <el-row
          v-if="title == '快捷回复'">
          <el-col :span="24">
            <el-form-item
              :label="title"
              prop="content">
              <AutoCompleteCustom
                v-if="editFormVisible"
                size="small"
                class="w100"
                placeholder="请输入快捷回复内容"
                :restaurants="contentList"
                :state="editForm.content"
                @handleSelect="handleSelect">
              </AutoCompleteCustom>
              <!--  回复插件 -->
<!--              <v-selectpage-->
<!--                class="my-selectpage-class"-->
<!--                ref="selectpageRefsA"-->
<!--                title="快捷回复"-->
<!--                placeholder="请选择快捷回复内容"-->
<!--                :data="dataService"-->
<!--                key-field="label"-->
<!--                search-field="label"-->
<!--                show-field="label"-->
<!--                v-model="editForm.content"-->
<!--                :pageSize="formReplay.pagenum"-->
<!--                :pageNumber="formReplay.page"-->
<!--                :params="formReplay"-->
<!--                :result-format="resultFormat"-->
<!--                @values="handelSingleValues">-->
<!--              </v-selectpage>-->
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--          </el-col>-->
        </el-row>
        <el-row
          v-if="title == '回复'">
          <el-form-item label="回复"  prop="content">
            <el-input
              clearable
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 4}"
              placeholder="请输入回复内容"
              v-model="editForm.content">
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="上传图片"
              prop="imagesList">
              <c-upload-sec
                ref="uploadSec"
                :deleteServe="true"
                class="flex1"
                accept=".png, .jpg, .jpeg"
                imgClass="img44"
                v-model="editForm.imagesList"
                :max="9"
                :filename="filename"
                itemStyles="width: 50px;height: 50px;margin: 0 8px 8px 0;"
                @complete="getPhoto">
              </c-upload-sec>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="上传视频"
              prop="imagesList">
              <c-upload-slice
                ref="uploadSlice"
                class="flex1"
                imgClass="img44"
                accept=".mp4,.m2v,.mkv"
                v-model="editForm.videosList"
                :limit="9"
                :maxSizeAll="50"
                :filename="filename"
                @complete="getVideos">
              </c-upload-slice>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editForm')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import cUploadSec from '@/components/c-upload-sec';
import cUploadSlice from '@/components/c-upload-slice';
import {mapGetters} from "vuex";
import Video from '@/components/Video'
import config from "@/api/config.js";
// 输入建议
import AutoCompleteCustom from "@/components/AutoCompleteCustom.vue"
import ClearableTextInput from '@/components/ClearableTextInput';

export default {
  // 注册组件
  components: {
    cUploadSec,
    cUploadSlice,
    Video,
    AutoCompleteCustom,
    ClearableTextInput,
  },
  data() {
    return {
      id: '',
      allowRequest: true,
      editForm: {
        id: '',
        content: '',
        consultationStatus: '',
        imagesList: [],
        videosList: [],
        type: 1,

        module: '',
        probability: '',
        questionTime: '',
        imei: '',
        customFields: {
          fingerprint: '',
          wifiMacAddress: '',
          btMacAddress: '',
        }
      },
      filename:'reply',
      // rules表单验证
      rules: {
        content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
        // content: [{ required: true, message: '请输入回复内容', trigger: 'change' }],
        consultationStatus: [{ required: true, message: '请选择编辑状态', trigger: 'change' }],
      },
      poster: '',
      //table标签:回复
      activeTabsValue: '',
      activeTabs: [],
      // activeTabsValue: 'reply',
      // activeTabs: [
      //   {
      //     name: 'reply',
      //     label: '回复',
      //   },
      //   {
      //     name: 'quickReply',
      //     label: '快捷回复',
      //   }
      // ],
      //自定义输入插件
      dataService: config.baseUrl+'api/quickreply/quickreplyList',
      formReplay: {
        pagenum: 10,
        page: 1,
        fromUrl: 'doc'
      },
      // 弹框
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '',
      permissionObj: {},
      // 标题
      labelTitle: '',
      labelPath: '',
      // 回复框高度
      replyBoxHeight: window.innerHeight - 274,
      contentList: [],

    }
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    const vm = this
    // 获取路由参数
    let query = this.$route.query;
    if (query) {
      if(query.id){
        vm.id = query.id
        vm.quickreplyListGet();
        vm.feedbackDetailGet(this.id)
      }
      if(query.labelTitle){
        vm.labelTitle = query.labelTitle || ''
      }
      if(query.labelPath){
        vm.labelPath = query.labelPath || ''
      }
      if(query.permissionObj&&JSON.parse(query.permissionObj)){
        vm.permissionObj = JSON.parse(query.permissionObj) || {}
        if(vm.authFilterLen(this.permissionObj, 'update').length>0){
          vm.activeTabsValue = 'reply'
          let arr = [
            {
              name: 'reply',
              label: '回复',
            }
          ]
          vm.activeTabs = [...vm.activeTabs,...arr]
        }
        if(vm.authFilterLen(this.permissionObj, 'quickReply').length>0){
          if(!vm.activeTabsValue){
            vm.activeTabsValue = 'quickReply'
          }
          let arr = [
            {
              name: 'quickReply',
              label: '快捷回复',
            }
          ]
          vm.activeTabs = [...vm.activeTabs,...arr]
        }
      }
    }
  },
  mounted () {
    // this.scrollToBottom();
  },
  computed:{
    ...mapGetters(['userAuthList', 'userInfo']),
    // ,permissionObj(){
    //   if(this.userAuthList&&this.userAuthList.length>0){
    //     return this.authListFilter(this.userAuthList,'invoices', 'BillingPlan')
    //   }
    // }
  },
  watch: {
    // 监听表单数据变化，当数据变化时触发验证:刷新页面不校验
    'editForm.content': {
      handler: function(newVal, oldVal) {
        if (newVal !== oldVal && newVal != undefined) {
          this.sleep(200).then(()=>{
            this.$refs.editForm.validateField('content');
          })
        }
      },
      deep: true
    }
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //滚动到css底部位置
    scrollToBottom() {
      const vm = this
      this.$nextTick(() => {
        let container = vm.$el.querySelector('to-btm');
        if(container){
          container.scrollTop = container.scrollHeight;
        }
      })
    },
    //获取部门列表
    feedbackDetailGet(id){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      vm.openFullScreen()
      vm.apiUrl.feedbackDetailGet({
        "id": id
      })
        .then(res => {
          vm.closeFullScreen(vm.openFullScreen());
          const { code, data, msg } = res;
          if (code != 0) {
            vm.showMessageMin({
              message: msg,
              type: 'error',
            })
          } else {
            this.editForm = {
              ...data,
              imagesList: [],
              videosList: [],
            }
          }
        })
    },
    // 显示修改客户借贷OA列表天数(批量修改客户借贷OA列表天数)编辑界面保存方法
    submitForm(editData) {
      const vm = this
      vm.$refs[editData].validate(valid => {
        if (valid) {
          const param = vm.objfilter(vm.editForm,['id','content','consultationStatus','imagesList', 'videosList']);
          // console.log('param', param)
          let request = vm.apiUrl.feedbackReply({
            ...param,
            isReply: 1,
            processor: vm.userInfo.userName
          },"POST")
          vm.openFullScreen()
          request.then((res) => {
            vm.closeFullScreen(vm.openFullScreen());
            const { code, msg, data } = res
            if (code != 0) {
              vm.showMessageMin({
                message: msg,
                type: 'error',
              })
            } else {
              vm.showMessageMin({
                message: '回复成功！',
                type: 'success',
              })
              vm.initData()
              // vm.editFormVisible = false
              vm.editForm.replyList.splice(1,0,data)
              console.log('vm.editForm', vm.editForm)
              vm.topScrollClick('mianscroll')
              // vm.feedbackDetailGet(vm.id)
            }
          })
        } else {
          return false
        }
      })
    },
    getPhoto(e){
      this.editForm.imagesList = e;
      console.log("this.editForm.imagesList",this.editForm.imagesList)
    },
    getVideos(e){
      this.editForm.videosList = e;
      console.log("this.editForm.videosList",this.editForm.videosList)
    },
    //显示编辑界面
    handleEdit: function(row,title) {
      const vm = this
      vm.title = title
      if(row){
        vm.editForm = {
          ...row
        }
      }
      vm.editFormVisible = true
    },
    resetForm(formName) {
      const vm = this
      if(!vm.$refs[formName]) return
      vm.$refs[formName].resetFields();
    },
    closeDialog(formName) {
      if(formName == 'editForm'){
        this.initData()
        this.resetForm(formName);
        this.editFormVisible = false
      }
    },
    initData(){
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        content: '',
        imagesList: [],
        videosList: [],
      }
      vm.$refs.uploadSlice.clearFiles();
      vm.$refs.uploadSec.clearFiles();
      if(vm.title == '快捷回复' || vm.activeTabsValue == 'quickReply'){
        //v-selectPage清空问题
        // vm.$refs.selectpageRefs.remove()
      }
    },
    //table标签:回复
    handleClick(tab) {
      const vm = this
      // if(vm.activeTabsValue == tab.name) return
      // if(tab.name == 'reply'){
      //   //v-selectPage清空问题
      //   vm.$refs.selectpageRefs.remove()
      // }
      vm.activeTabsValue = tab.name
      this.editForm = {
        ...this.editForm,
        content: '',
        consultationStatus: '',
      }
    },
    //需要特殊格式totalRow+list
    resultFormat(res){
      const vm = this
      const { code, data:{
        list=[],totalnum=0
      } } = res
      if(code==0&&list&&list.length>0) {
        let obj = {
          totalRow: totalnum,
          list:list,
          // list:list.map((item)=>{
          //   return {
          //     ...item,
          //     label: item.short+item.name,
          //   }
          // })
        }
        return obj
      }else {
        return
      }
    },
    async handelSingleValues(data){
      console.log('handelSingleValues',data)
      const vm = this
      if(data&&data.length>0){
        vm.editForm = {
          ...vm.editForm,
          content: data[0].label
        }
      }
    },
    //获取快捷回复列表
    quickreplyListGet(){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      this.apiUrl.quickreplyListGet()
        .then(res => {
          let { code, data:{
            list=[]
          } } = res;
          if(code == 0){
            if(list){
              list = list.map(item=>{
                return {
                  ...item,
                  label: item.label,
                  value: item.label,
                }
              })
              vm.contentList = list;
            }
          }
        })
    },
    // 带输入建议
    handleSelect(item) {
      const vm = this
      vm.editForm={
        ...vm.editForm,
        content: item.value
      }
    },
    inputChangeMethod() {
      console.log('input changed')
    }

  }
}
</script>

<style lang="less" scoped>
.m-video .u-play{
  width: 48px !important;
  height: 48px !important;
}

/deep/ .el-upload__tip{
  line-height: 20px;
  margin-top: 0;
}

/deep/ .el-form-item{
  margin-bottom: 10px;
}

//
.clearButton {
  position: absolute;
  border-radius: 5px;
  right: 3px;
  z-index: 2;
  border: none;
  top: -3px;
  height: 40px;
  cursor: pointer;
  color: #ccc;
  transform: translateX(2px);
}

.clearButton:hover {
  color: #878d99;
}
</style>
